<template>
  <el-dialog 
    title="创建新会议" 
    v-model="visible" 
    width="600px"
    :before-close="handleClose"
  >
    <el-form 
      ref="meetingFormRef" 
      :model="meetingForm" 
      :rules="rules" 
      label-width="100px"
    >
      <!-- 会议名称 -->
      <el-form-item label="会议名称" prop="name">
        <el-input v-model="meetingForm.name" placeholder="请输入会议名称" />
      </el-form-item>

      <!-- 会议时间 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              v-model="meetingForm.startTime"
              type="datetime"
              placeholder="选择开始时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="meetingForm.endTime"
              type="datetime"
              placeholder="选择结束时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 会议地点 -->
      <el-form-item label="会议地点" prop="location">
        <el-select v-model="meetingForm.location" placeholder="请选择会议地点">
          <el-option label="一号会议室" value="1" />
          <el-option label="二号会议室" value="2" />
          <el-option label="三号会议室" value="3" />
          <el-option label="线上会议" value="online" />
        </el-select>
      </el-form-item>

      <!-- 参会人员 -->
      <el-form-item label="参会人员" prop="attendees">
        <el-select
          v-model="meetingForm.attendees"
          multiple
          placeholder="请选择参会人员"
        >
          <el-option label="张三" value="101" />
          <el-option label="李四" value="102" />
          <el-option label="王五" value="103" />
          <el-option label="赵六" value="104" />
        </el-select>
      </el-form-item>

      <!-- 会议发起人 -->
      <el-form-item label="会议发起人" prop="host">
        <el-select v-model="meetingForm.host" placeholder="请选择主持人">
          <el-option label="张三" value="101" />
          <el-option label="李四" value="102" />
          <el-option label="王五" value="103" />
          <el-option label="赵六" value="104" />
        </el-select>
      </el-form-item>

      <!-- 会议议程 -->
      <el-form-item label="会议议程" prop="agenda">
        <el-input
          v-model="meetingForm.agenda"
          type="textarea"
          rows="4"
          placeholder="请输入会议议程"
        />
      </el-form-item>

      <!-- 会议备注 -->
      <el-form-item label="会议备注">
        <el-input
          v-model="meetingForm.remark"
          type="textarea"
          rows="2"
          placeholder="请输入备注信息（选填）"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">创建会议</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 控制弹窗显示/隐藏
const visible = ref(false);

// 表单引用
const meetingFormRef = ref(null);

// 会议表单数据
const meetingForm = reactive({
  name: '',             // 会议名称
  startTime: null,      // 开始时间
  endTime: null,        // 结束时间
  location: '',         // 会议地点
  attendees: [],        // 参会人员
  host: '',             // 会议发起人
  agenda: '',           // 会议议程
  remark: ''            // 备注信息
});

// 表单验证规则
const rules = reactive({
  name: [
    { required: true, message: '请输入会议名称', trigger: 'blur' },
    { min: 2, max: 50, message: '会议名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请选择会议地点', trigger: 'change' }
  ],
  attendees: [
    { required: true, message: '请至少选择一位参会人员', trigger: 'change' },
    { type: 'array', min: 1, message: '请至少选择一位参会人员', trigger: 'change' }
  ],
  host: [
    { required: true, message: '请选择会议发起人', trigger: 'change' }
  ],
  agenda: [
    { required: true, message: '请输入会议议程', trigger: 'blur' },
    { min: 5, message: '会议议程至少 5 个字符', trigger: 'blur' }
  ]
});

// 打开弹窗
const openDialog = () => {
  visible.value = true;
  // 重置表单
  meetingFormRef.value?.resetFields();
};

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
  // 重置表单
  meetingFormRef.value?.resetFields();
};

// 提交表单
const handleSubmit = () => {
  meetingFormRef.value.validate((valid) => {
    if (valid) {
      // 验证通过，提交数据
      console.log('会议表单数据:', meetingForm);
      
      // 这里可以添加实际的提交逻辑，如API调用
      // 示例：
      // createMeeting(meetingForm).then(() => {
      //   ElMessage.success('会议创建成功');
      //   visible.value = false;
      // }).catch(() => {
      //   ElMessage.error('会议创建失败');
      // });
      
      // 模拟提交成功
      visible.value = false;
      alert('会议创建成功！');
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};

// 暴露打开弹窗的方法给父组件
defineExpose({
  openDialog
});
</script>

<style scoped>
/* 可以添加自定义样式 */
:deep(.el-dialog__body) {
  max-height: 60vh;
  overflow-y: auto;
  padding-top: 20px;
}
</style>
